<script setup>
import { ref } from 'vue'

let warm = ref('请申请座位的同学记得实名呀~~  实名在左上角第一个图标里')
const seat = ref({})

function getCurrentSeat(newSeat) {
  seat.value = newSeat // 更新座位信息
}
</script>

<template>
  <el-container>
    <el-header>
      <Header></Header>
    </el-header>
    <el-main>
      <el-row>
        <el-col :span="24" class="welcome-title">
          <div>
            <div id="warning-message">
              <i>{{ warm }}</i>
            </div>
            <hr>
            <h3>欢迎来到</h3>
            <h2>异步开发实验室座位预约系统</h2>
          </div>
          <div class="time-title">
            <p>欢迎每一个热爱开发的你~</p>
          </div>
        </el-col>
      </el-row>
      <el-row justify="center">
        <el-col :md="12" :xs="22">
          <seatView @clickSeat="getCurrentSeat"></seatView>
        </el-col>
      </el-row>
      <el-row justify="center">
        <el-col :md="12" :xs="22">
          <SeatStatus :seat="seat"></SeatStatus>
        </el-col>
      </el-row>
    </el-main>
    <el-footer>
      <Footer></Footer>
    </el-footer>
  </el-container>
</template>

<style scoped>
.welcome-title {
  text-align: center;
}

.el-container,
.el-header,
.el-footer {
  padding: 0;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

#warning-message {
  color: red;
  overflow: hidden;
}

#warning-message i {
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  display: block;
  transform: translateX(100%);
  animation: scrollleft 15s linear;
}

@keyframes scrollleft {
  to {
    transform: translateX(-100%);
  }
}
</style>
